<!-- 冲稳保 -->
<template>
  <el-table-column :width="width" :align="align" v-bind="$attrs">
    <template slot-scope="scope">
      <strong class="probability-text">{{ scope.row.probability }}</strong>
      <el-tag v-if="scope.row.probability && !scope.row.majorCode" size="mini" :style="scope.row.probabilityName | name2Color" effect="dark">
        {{ scope.row.probabilityName }}
      </el-tag>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'ColProbability',
  props: {
    width: {
      type: Number | String,
      default: 80,
    },
    align: {
      type: String,
      default: 'center'
    }
  },

  filters: {
    name2Color(probabilityName) {
      let color = {
        '冲': 'red',
        '稳': 'orange',
        '保': 'green',
      }[probabilityName]

      return {
        background: color,
        borderColor: color,
      }
    },
  }
}
</script>

<style scope lang="stylus">
.probability-text
  display inline-block
  margin-right 2px
</style>
